<template>
  <div class="right-top">
    <div>
      <el-tree
        accordion
        :data="treeData"
        :props="defaultProps"
        @node-click="handleNodeClick"
        ref="treeSelect"
      ></el-tree>
      <div class>
        <el-button @click="confirmHandle">确认选择</el-button>
      </div>
    </div>
    <div v-if="scene == 'senceA'">
      <div v-for="(Faitem, index) in markersArr" :key="index">
        <el-checkbox
          v-model="Faitem.markerShow"
          @change="checkArrs(Faitem.markerType)"
        >{{Faitem.markerName}}</el-checkbox>
        <v-list v-if="Faitem.markerShow">
          <v-list-item
            @click="checkSingle(item)"
            v-for="item in Faitem.makerData"
            :key="item.id"
          >{{item.name}}</v-list-item>
        </v-list>
      </div>
      <div></div>
    </div>
    <div v-if="scene == 'senceB'">
      <div class="collapse" v-for="(Faitem, index) in markersArr" :key="index">
        <div class="el-checkbox-wide">
          <el-checkbox v-model="Faitem.markerShow" @change="checkArrs(Faitem.markerType)"></el-checkbox>
        </div>
        <div style="width:100%">
          <el-collapse>
            <el-collapse-item :title="Faitem.markerName">
              <v-list v-if="Faitem.markerShow">
                <v-list-item
                  @click="checkSingle(item)"
                  v-for="item in Faitem.makerData"
                  :key="item.id"
                >{{item.name}}</v-list-item>
              </v-list>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
    </div>
    <!-- <div v-if="scene == 'indoor'">
      <v-radio-group>
        <v-radio label="1楼" @change="switchFloors('1')"></v-radio>
        <v-radio label="2楼" @change="switchFloors('2')"></v-radio>
        <v-radio label="3楼" @change="switchFloors('3')"></v-radio>
      </v-radio-group>
    </div>-->
  </div>
</template>
<script>
const carTracks1 = require('../../../static/carTracks1.json')
const carTracks2 = require('../../../static/carTracks2.json')
const carTracks3 = require('../../../static/carTracks3.json')
const doorsGeo1 = require('../../../static/doorsGeo1.json')
const doorsGeo2 = require('../../../static/doorsGeo2.json')
const doorsGeo3 = require('../../../static/doorsGeo3.json')
const floor1Arrs = require('../../../static/floor1.json')

export default {
  name: '',
  props: {
    markersArr: Array,
    typesArr: Array,
    treeData: Array
  },
  data() {
    return {
      scene: '',
      ChooseScene: '',
      count: 0,
      defaultProps: {
        children: 'children',
        label: 'label',
        value: 'value'
      }
    }
  },
  methods: {
    //厂区A
    mapToA() {
      // this.scene = 'A';
      // this.$http.get(this.$api.SCENES.sceneBlockA, true).then(
      //   (res) => {
      //     let sceneA = res.data;
      //     let mapOptions = {
      //       mapStyle: sceneA.mapboxStyle,
      //       maxBounds: sceneA.sceneBounds,
      //       zoom: sceneA.mapboxStyle.zoom
      //     };
      //     let typesArr = sceneA.sceneElements
      //     this.$emit('mapOptions', mapOptions)
      //     this.$emit('typesArr', typesArr)

      //     this.$http.get(this.$api.MARKERS.markersA, true).then(
      //       (res) => {
      //         let markersArr = res.data;
      //         this.$emit('markersArr', markersArr)
      //       })
      //   }
      // )
      let mapOptions = {
        mapStyle: 'mapbox://styles/mapbox/streets-v9',
        center: [121.46606527761764, 30.792891165003894],
        maxBounds: [[121.4615526907096, 30.790186199605543], [121.4705778645278, 30.79559605429958]],
        zoom: 16.737981956944786
      }
      this.$emit('mapOptions', mapOptions)
    },
    //厂区B
    mapToB() {
      // this.scene = 'B';
      this.$http.get(this.$api.SCENES.sceneBlockB, true).then(
        (res) => {
          let sceneB = res.data;
          let mapOptions = {
            mapStyle: sceneB.mapboxStyle,
            maxBounds: sceneB.sceneBounds,
            zoom: sceneB.mapboxStyle.zoom
          };
          let typesArr = sceneB.sceneElements;
          this.$emit('mapOptions', mapOptions)
          this.$emit('typesArr', typesArr)

          this.$http.get(this.$api.MARKERS.markersB, true).then(
            (res) => {
              let markersArr = res.data;
              this.$emit('markersArr', markersArr)
            })
        }
      )
    },
    //查看点位类型数组
    checkArrs(type) {
      if (this.typesArr.indexOf(type) != -1) {
        this.typesArr.splice(this.typesArr.indexOf(type), 1);
      } else {
        this.typesArr.push(type);
      }
    },
    checkSingle(single) {
      single.popShow = true;
    },
    //查看C区车辆
    CCar() {
      // this.scene = 'C';
      this.$emit('carTracks', [])
      this.$http.get(this.$api.SCENES.sceneBlockC, true).then(
        (res) => {
          let sceneC = res.data;
          let mapOptions = {
            mapStyle: sceneC.mapboxStyle,
            maxBounds: sceneC.sceneBounds,
            zoom: sceneC.mapboxStyle.zoom
          };
          let typesArr = sceneC.sceneElements
          this.$emit('mapOptions', mapOptions)
          this.$emit('typesArr', typesArr)
        }
      )

      setTimeout(() => {
        this.$emit('carTracks', carTracks1)
      }, 1000)

      var setInter;
      console.log('count:' + this.count);
      setInter = setInterval(() => {
        this.count += 1;
        if (this.count > 3) {
          clearInterval(setInter);
          this.count = 0;
        } else {
          switch (this.count) {
            case 2:
              this.$emit('carTracks', carTracks2)
              break;
            case 3:
              this.$emit('carTracks', carTracks3)
              break;
            default:
              return
          }
        }
      }, 3000);
    },
    //室内图
    indoor() {
      this.scene = 'indoors';
      this.$emit('newScene', this.scene);
      // this.$emit('indoorArrs', [])
      // this.$emit('doorsGeo', doorsGeo1)
      // this.$http.get(this.$api.SCENES.sceneIndoors, true).then(
      //   (res) => {
      //     let sceneIn = res.data;
      //     let mapOptions = {
      //       mapStyle: sceneIn.mapboxStyle,
      //       maxBounds: sceneIn.sceneBounds,
      //       zoom: sceneIn.mapboxStyle.zoom
      //     };
      //     let typesArr = sceneIn.sceneElements;

      //     this.$emit('mapOptions', mapOptions)
      //     this.$emit('typesArr', typesArr)
      //     this.$emit('newScene', sceneIn.sceneId);
      //   }
      // )
      // this.$emit('floor', '1')
      let mapOptions = {
        mapStyle: 'mapbox://styles/mapbox/streets-v9',
        center: [121.46511953446259, 30.794363957243704],
        maxBounds: [[121.46440184156847, 30.793933764588118], [121.46583722736204, 30.794794147974613]],
        zoom: 19.39049812770124
      }
      this.$emit('mapOptions', mapOptions)
      setTimeout(() => {
        this.$http.get(this.$api.LAYERS.indoorGeo, true).then(
          (res) => {
            let geoArrs = res.data;
            this.$emit('indoorArrs', geoArrs)
          })
      }, 1000)
      this.$emit('floor', '1')
    },
    switchFloors(floor) {
      this.$emit('floor', floor)
      switch (floor) {
        case '1':
          this.$emit('doorsGeo', doorsGeo1)
          break;
        case '2':
          this.$emit('doorsGeo', doorsGeo2)
          break;
        case '3':
          this.$emit('doorsGeo', doorsGeo3)
          break;
        default:
      }
    },
    handleNodeClick(data) {
      console.log('treeData:' + data);
      this.ChooseScene = data['value']
    },
    confirmHandle() {
      console.log('confirm-click');
      console.log('treeSelect:' + this.$refs.treeSelect)
      // this.$refs.treeSelect.defaultExpandAll = true;
      this.scene = this.ChooseScene;
      switch (this.scene) {
        case 'senceA':
          this.mapToA();
          break;
        case 'senceB':
          // this.mapToB();
          break;
        case 'senceC':
          // this.CCar();
          break;
        case 'senceA-1':
          this.indoor();
          break;
        case 'whole':
          this.$emit('newScene', this.scene);
          break;
        default:
      }
    }
  }
}

</script>
<style>
.right-top {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}
.el-checkbox-wide {
  padding-top: 13%;
  padding-right: 5%;
}
</style>